<template>
	<!-- <div class="left-container"> -->
	<div>
		<div style="padding-top: 2vw">
			<div class="tag-group">
				<div class="tag-label">分析粒度</div>
				<div class="tag-cell">
					<div class="tag-item" v-for="(item, index) in granularityList" :key="index"
						:class="{ active: tagesForm.type === index + 1 }" @click="granularityClick(index + 1)">
						{{ item.label }}
					</div>
				</div>
			</div>

			<!-- 实时粒度 -->
			<div v-if=" tagesForm.type ==1" class="tag-group">
				<div class="tag-label">分析日期</div>
				<div class="today tag-cell">
					<el-date-picker size="small" v-model="value2" readonly align="right" type="datetime"
						placeholder="选择日期" :picker-options="pickerOptions">
					</el-date-picker>
					<div class="refresh" @click="realRefresh">5分钟自动刷新</div>
				</div>
			</div>
			<div v-else-if=" tagesForm.type ==2" class="tag-group">
				<div class="tag-label">分析日期</div>
				<div class="  tag-cell">

					<el-date-picker size="small" v-model="value2" @change="dayChanage()" align="right" type="date"
						placeholder="选择日期" :picker-options="pickerOptions">
					</el-date-picker>

				</div>
			</div>
			<div v-else-if=" tagesForm.type ==3" class="tag-group">
				<div class="tag-label">分析日期</div>
				<div class="today tag-cell">
					<el-date-picker size="small" v-model="value2" @change="weekChanage()" align="right" type="week"
						placeholder="选择周">
					</el-date-picker>

				</div>
			</div>
			<div v-else-if=" tagesForm.type ==4" class="tag-group">
				<div class="tag-label">分析日期</div>
				<div class="today tag-cell">
					<el-date-picker size="small" v-model="value2" @change="monthChanage()" align="right" type="month"
						placeholder="选择月" :picker-options="pickerOptions">
					</el-date-picker>

				</div>
			</div>

			<!-- <div v-if="tagesForm.type==3||tagesForm.type==4||tagesForm.type==5" class="tag-group">
				<div class="tag-label">日期类型</div>
				<div class="tag-cell">
					<el-radio-group size="small" @change="datetypeChanage()" v-model="datetypeCheckList">

						<template v-for="(item, index) in datetypeList" :key="index">

							<el-radio-button size="small" :label="item.value">{{item.label }}</el-radio-button>

						</template>
					</el-radio-group>
				</div>

			</div>
			<div v-if="tagesForm.type!=1" class="tag-group">
				<div class="tag-label">分析时段 </div>
				<div class="tag-cell">
					<el-select size="small" v-model="timetype" @change="timetypeChanage()" placeholder="请选择">
						<el-option v-for="item in timetypeList" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
			</div> -->
			<!-- 交通定期分析 -->
			<div class="tag-group">
				<div class="tag-label">道路标签</div>
				<div class="tag-cell">
					<el-checkbox-group size="small" v-model="roadTagCheckList">

						<template v-for="(item, index) in roadTagList" :key="index">

							<el-checkbox-button size="small" @change="tagClick(index + 1, 'roadType')"
								v-if="item.value > 1" :label="index + 1">{{item.label }}</el-checkbox-button>
							<!--   <div class="tag-item" v-if="item.value > 1" :class="{ active: tagesForm.roadType === index + 1 }"
                @click="tagClick(index + 1, 'roadType')">
                {{ item.label }}
                <el-checkbox :label="item.label "></el-checkbox>
              </div> -->
						</template>
					</el-checkbox-group>
				</div>



			</div>

			<div class="tag-group">
				<div class="tag-label">排序方式</div>
				<div class="tag-cell">
					<el-radio-group @change="orderbyChanage()" v-model="orderbyCheckList">

						<template v-for="(item, index) in orderbyList" :key="index">

							<el-radio-button size="small" :label="item.value">{{item.label }}</el-radio-button>

						</template>
					</el-radio-group>
				</div>

			</div>
			<!-- 自定义日期 -->
			<div v-if="tagesForm.type == 5">
				<div class="tag-group">
					<div class="tag-label">自定义日期选择</div>
					<div class="date">
						<el-date-picker size="small" v-model="analysisDate" type="daterange" range-separator="至"
							value-format="YYYY-MM-DD" format="YYYY-MM-DD" start-placeholder="选择开始日期"
							end-placeholder="选择结束日期" @change="changeAnalysisDate" />
					</div>
				</div>

			</div>
			<!-- 搜索 -->
			<div class="search">
				<div class="search-input"><el-input size="small" v-model="queryForm.areaName" placeholder="请输入"
						:prefix-icon="Search" @keyup.enter.native="getList" @change="getList" clearable /></div>

			</div>


			<el-table :data="tableData" style="width: 100%" :height="'54vh'" v-loading="tableLoading"
				element-loading-background="rgba(0, 0, 0, 0.8)" highlight-current-row @current-change="currentChange">
				<!--  @cell-click="clickItemTr" -->
				<el-table-column prop="rank" label="排行" width="100">
					<template #default="{ $index }">
						<div class="index-color">{{ $index + 1 }}</div>
					</template>
				</el-table-column>
				<el-table-column :prop="'roadname'" label="道路名称">
					<template #default="scope">
						<el-popover effect="light" trigger="hover" placement="top" width="auto">
							<template #default>
								<div>{{ scope.row.nodeId }} {{ scope.row.roadId }}-{{
                    scope.row.roadname
                  }}</div>
							</template>
							<template #reference>
								<div class="flex_between">
									<span>{{ scope.row.roadname}}</span>

								</div>
							</template>
						</el-popover>
					</template>
				</el-table-column>

				<el-table-column label="拥堵指数" width="100">
					<template #default="{ row }">
						<span class="congestion-num" :class="{
                red: row.congestIndex > 2,
                orange: row.congestIndex > 1.5 && row.congestIndex < 2,
              }">{{ Number(row.congestIndex).toFixed(2) }}
						</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- </div>
        <div class="not-data" v-else>暂无数据</div> -->
		</div>


	</div>
	<!-- </div> -->

</template>
<script>
	import {
		RightOutlined
	} from '@ant-design/icons-vue';
	import {
		Checkbox
	} from 'ant-design-vue';
	import {
		defineComponent,
		inject,
		reactive,
		toRefs,
		onMounted,
		nextTick,
		computed,
		onBeforeUnmount,
		watch,
	} from 'vue';
	import {
		useMapStore
	} from '@/store/modules/map';
	import customDatePicker from '@/components/customDatePicker';
	import {
		Search,
		ArrowLeft
	} from '@element-plus/icons-vue';
	import {
		getSelectByParamsList,
		getQueryRoadRank,
		getCoordinateBySplitName,
		compareAreaCongest,
	} from '@/api/tomae';
	import {
		searchList
	} from '@/views/tomae/static/keyArea';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	import {
		cancelAllReq
	} from '@/utils/request';
	import dayjs from 'dayjs';
	import {
		constantRouterComponents
	} from '@/router/asyncModules';
	export default defineComponent({
		components: {
			customDatePicker
		},
		props: {
			is_ctdd_show: false,
		},
		emits: ['tabs-click', 'queryDate'],
		setup(props, {
			emit
		}) {
			const mapStore = useMapStore();

			const state = reactive({
				map: computed(() => mapStore.ownMap),
				today: '',
				sameDay: {
					time: '',
					keywork: '',
					period: '',
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				value2: new Date(),
				value1: '',
				datetypeList: [{
						value: 0,
						label: "全部日期"
					},
					{
						value: 1,
						label: "工作日"
					},
					{
						value: 2,
						label: "节假日"
					},
				],
				orderbyCheckList: [],
				orderbyList: [{
						value: 1,
						label: "拥堵指数"
					},

				],
				datetypeCheckList: [1],
				timetype: 1,
				timetypeList: [{
						value: 1,
						label: "全天(6:00-22:00)"
					},
					{
						value: 2,
						label: "早高峰(7:00-9:00)"
					},
					{
						value: 3,
						label: "晚高峰(17:00-19:00)"
					},
					{
						value: 4,
						label: "高峰(7:00-9:00,17:00-19:00)"
					},
					{
						value: 5,
						label: "早平峰(6:00-7:00)"
					},
					{
						value: 6,
						label: "上午平峰(9:00-11:00)"
					},
					{
						value: 7,
						label: "午高峰(11:00-13:00)"
					},
					{
						value: 8,
						label: "下午高峰(13:00-17:00)"
					}
				],
				// value1: [new Date("2024-01-01 06:00"),new Date("2024-01-01 22:00")],
				timer: null,
				// tabsList: searchList.tabsList,
				periodOptions: searchList.periodOptions,
				granularityList: searchList.granularityList,
				roadTagList: searchList.roadTagList,
				// sortOrder: searchList.sortOrder,
				tableData: [],
				tableLoading: false,
				radius: '',
				currentRow: {},
				queryForm: {
					areaName: '',
				},
				analysisDate: [],
				roadTagCheckList: [4],
				polylineList: [],
				tagesForm: {
					type: 1,
					roadType: 4,
					startDate: '',
					endDate: '',
					roadName: '',
				},


			});
			// 获取当前时间
			const getToday = () => {
				var date = new Date();
				var year = date.getFullYear();
				var dateArr = [
					date.getMonth() + 1,
					date.getDate(),
					date.getHours(),
					date.getMinutes(),
					date.getSeconds(),
				];
				for (var i = 0; i < dateArr.length; i++) {
					if (dateArr[i] >= 1 && dateArr[i] <= 9) {
						dateArr[i] = '0' + dateArr[i];
					}
				}
				var strDate =
					year +
					'-' +
					dateArr[0] +
					'-' +
					dateArr[1] +
					' ' +
					dateArr[2] +
					':' +
					dateArr[3] +
					':' +
					dateArr[4];
				state.today = strDate;

			};
			// 刷新
			const realRefresh = () => {
				getToday();
				clearTimeout(state.timer);
				state.timer = setTimeout(() => {
					realRefresh();
				}, 1000 * 60 * 5);
			};



			// 获取列表
			const getList = async () => {
				if (state.tableLoading) {
					cancelAllReq();

					// return;
				}
				state.currentRow = {};
				state.tableLoading = true;


				// 判断为交通运行界面
				if (props.is_ctdd_show) {
					state.tagesForm.roadName = state.queryForm.areaName;
					const data = await getQueryRoadRank(state.tagesForm);

					state.tableData = data;
				} else {
					const data = await getSelectByParamsList(state.queryForm);
					// console.log("---",data);
					state.tableData = data;
				}
				state.tableLoading = false;
			};

			// 表格选择
			const currentChange = (currentRow) => {
				state.currentRow = currentRow;
				console.log("currentRow", currentRow);
				if (!currentRow) {
					return;
				}
				let firstPoint = ''
				let lastPoint = ''
				// 拆分经纬度数据并按两个一组分组
				if (currentRow.sparseLoc) {
					const coordinates = currentRow.sparseLoc[0].split(',').reduce((result, value, index,
						array) => {
						if (index % 2 === 0) {
							result.push([array[index], array[index + 1]]);
						}
						return result;
					}, []);

					// 提取第一组和最后一组经纬度
					firstPoint = coordinates[0];
					lastPoint = coordinates[coordinates.length - 1];
				} else {
					firstPoint = currentRow.origin.split(',')
					lastPoint = currentRow.terminus.split(',')
				}
				state.map.clearOverlays();
				state.startPoint = '';
				state.endPoint = '';
				console.log(firstPoint, lastPoint)
				// if (currentRow.sparseLoc) {
				state.startPoint = new window.BMap.Point(
					firstPoint[0],
					firstPoint[1],
				);
				if (state.map.getZoom() < 16) {
					state.map.setZoom(16);
				}
				state.map.panTo(state.startPoint);
				// }
				// if (currentRow.terminus) {
				state.endPoint = new window.BMap.Point(
					lastPoint[0],
					lastPoint[1],
				);
				// }

				// 不知道这里为什么是这个逻辑，如果点击到这种数据的道路，再点击到其他道路，会画出来两次道路，且数据不正确
				// if (currentRow.customRoadMiddleList) {
				//   state.viaPoint = [];
				//   currentRow.customRoadMiddleList.forEach((item) => {
				//     let p = new window.BMap.Point(item.middle.split(',')[0], item.middle.split(',')[1]);
				//     state.viaPoint.push(p);
				//   });
				// }
				console.log(state, 'state')
				if (state.startPoint && state.endPoint) {
					drawRoad();
				}
				emit('queryDate', currentRow);
				clickItemTr(currentRow)
			};
			// 绘制道路
			const drawRoad = () => {
				state.polylineList.forEach((item) => {
					state.map.removeOverlay(item);
				});

				if (state.startPoint && state.endPoint) {
					state.polylineList = [];
					var driving = new window.BMap.RidingRoute(state.map, {
						renderOptions: {
							map: state.map,
							autoViewport: false
						},
						onSearchComplete(results) {
							// 绘制途径路线
							console.log('23432c');
							if (results) {
								var sy = new window.BMap.Symbol(
									BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
										scale: 0.5, //图标缩放大小
										strokeColor: '#fff', //设置矢量图标的线填充颜色
										strokeWeight: '2', //设置线宽
									});
								var icons = new window.BMap.IconSequence(sy, '10', '30');
								var pts = results.getPlan(0).getRoute(0).getPath();
								console.log(state.currentRow, '指数')
								let strokeColor = '#93D2F3'; // 默认颜色为蓝色（拥堵颜色）

								if (state.currentRow.congestIndex < 1.5) {
									strokeColor = 'rgba(117, 197, 31, 1)'; // 小于 1.5 时为绿色
								} else if (state.currentRow.congestIndex >= 1.5 && state.currentRow
									.congestIndex <= 2) {
									strokeColor = 'rgba(248, 162, 46, 1)'; // 1.5 到 2 之间为黄色
								} else if (state.currentRow.congestIndex > 2 && state.currentRow
									.congestIndex <= 4) {
									strokeColor = 'rgba(244, 59, 29, 1)'; // 大于 2 时为红色
								} else {
									strokeColor = 'rgba(170, 32, 23, 1)'; // 大于 4 时为深红色
								}

								var polyline = new window.BMap.Polyline(pts, {
									icons: [icons],
									strokeWeight: '8',
									strokeOpacity: 0.5,
									strokeColor: strokeColor, // 使用动态的颜色
								});
								// polyline.setStrokeColor('#59FF59');
								// polyline.setStrokeOpacity(1);
								state.polylineList.push(polyline);
								state.map.addOverlay(polyline);
							}
						},
						onMarkersSet(routes) {
							// console.log('---', routes);
							routes.forEach((item, index) => {
								state.map.removeOverlay(item);
							});
						},
						onInfoHtmlSet() {},
						onPolylinesSet(routes) {
							console.log("routesroutes", routes);
							// 路线绘制
							routes.forEach((Route) => {
								var polyline = Route.getPolyline();
								polyline.setStrokeColor('#CB2D56');
								// polyline.setStrokeOpacity(1)
								polyline.setStrokeWeight(1);
							});
						},
					});

					//途经点方式化路线:
					// driving.search(state.startPoint, state.endPoint, { waypoints: state.viaPoint });

					//分段画路线:
					if (state.viaPoint && state.viaPoint.length) {
						for (let i = 0; i < state.viaPoint.length; i++) {
							if (i === 0) {
								driving.search(state.startPoint, state.viaPoint[i]);
							} else {
								driving.search(state.viaPoint[i - 1], state.viaPoint[i]);
							}
						}
						driving.search(state.viaPoint[state.viaPoint.length - 1], state.endPoint);
					} else {
						driving.search(state.startPoint, state.endPoint);
					}
				}
			};
			//单行点击
			const clickItemTr = async (row) => {
				// debugger
				const data = await getCoordinateBySplitName({
					roadName: row.roadname
				});
				console.log(data)
				if (data.lng && data.lat) {
					const conPoint = new window.BMap.Point(data.lng, data.lat);

					state.map.centerAndZoom(conPoint, 16);
				}

				// console.log("data",data);
			};



			const orderbyChanage = () => {
				state.tagesForm["orderBy"] = state.orderbyCheckList;
				getList();
			};
			const datetypeChanage = () => {
				state.tagesForm["datetype"] = state.datetypeCheckList;
				getList();
			};

			const timetypeChanage = () => {
				state.tagesForm["timetype"] = state.timetype;
				getList();
			};
			const dayChanage = () => {
				state.tagesForm["searchType"] = 2;
				state.tagesForm["datatime"] = state.value2;
				getList();
			};
			const weekChanage = () => {
				state.tagesForm["searchType"] = 3;
				state.tagesForm["datatime"] = state.value2;
				getList();
			};
			const monthChanage = () => {
				state.tagesForm["searchType"] = 4;
				state.tagesForm["datatime"] = state.value2;
				getList();
			};


			// 粒度点击
			const granularityClick = (index) => {
				state.tagesForm.type = index;
				if (index == 0) {
					getToday();
					state.timer = setTimeout(() => {
						realRefresh();
					}, 1000 * 60 * 5);
				} else {
					clearTimeout(state.timer);
				}
				getList();
			};
			const tagClick = (index, key) => {
				state.tagesForm[key] = state.roadTagCheckList.join(',');
				getList();
			};



			// 自定义时间选择
			const changeAnalysisDate = (val) => {
				state.tagesForm.startDate = val[0];
				state.tagesForm.endDate = val[1];
				emit('queryDate', state.tagesForm);
				getList();
			};
			// const changeTable = (val) => {
			//   if (state.currentRow && JSON.stringify(state.currentRow) !== '{}') {
			//     emit('table-select', state.tagesForm);
			//   }
			// };
			onMounted(() => {
				getToday();
				getList();
				state.timer = setTimeout(() => {
					realRefresh();
				}, 1000 * 60 * 5);


			});
			// 页面离开
			onBeforeUnmount(() => {
				clearTimeout(state.timer);
			});

			return {
				...toRefs(state),
				realRefresh,
				currentChange,
				clickItemTr,
				Search,
				ArrowLeft,
				getList,
				granularityClick,
				tagClick,
				// changeTable,
				changeAnalysisDate,
				orderbyChanage,
				datetypeChanage,
				timetypeChanage,
				dayChanage,
				weekChanage,
				monthChanage
			};
		},
	});
</script>
<style scoped lang="less">
	// .left-container {
	//   position: absolute;
	//   z-index: 4;
	//   left: 1.5625vw;
	//   top: 4%;
	//   background-color: rgba(0, 0, 0, 0.8);
	//   padding: 1vw;
	//   height: 94%;
	//   .tabs-group {
	//     display: flex;
	//     .tabs-item {
	//       width: 5.7291vw;
	//       height: 2.2395vw;
	//       line-height: 2.2395vw;
	//       background: rgba(255, 255, 255, 0);
	//       border: 1px solid #aeb4ba;
	//       box-shadow: 0px 5px 0px 0px rgba(224, 238, 253, 0.3);
	//       border-radius: 8px 0px 8px 0px;
	//       color: #ffffff;
	//       margin-right: 1vw;
	//       text-align: center;
	//       cursor: pointer;
	//     }
	//     .tabs-item.active {
	//       border: 1px solid #037bff;
	//       background: #037bff;
	//     }
	//   }
	// }


	.tag-group {
		display: flex;
		color: rgba(255, 255, 255, 0.7);
		align-items: center;
		margin: 0 0 1vw;

		.tag-label {
			width: 4vw;
		}

		.tag-cell {
			padding-left: 0.1vw;
			display: flex;
		}

		.tag-item {
			padding: 4px 10px;
			cursor: pointer;
			margin-right: 0.5vw;

			&:last-child {
				margin-right: 0;
			}
		}

		.tag-item.active {
			color: white;
			background: #037bff;
			border-radius: 4px;
		}

		.today {
			display: flex;
			justify-content: space-between;
			flex-grow: 1;

			.date-box {
				color: white;
			}

			.refresh {
				cursor: pointer;
				color: #4979ff;
			}
		}

		.date {
			border: 1px solid rgba(3, 123, 255, 1);
			border-radius: 4px;
			flex: 1;
		}
	}

	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.search-input {
			border: 1px solid #037bff;
			border-radius: 8px;
			flex-grow: 3;
		}

		.export {
			flex-grow: 2;
			color: rgba(3, 123, 255, 1);
			display: flex;
			text-align: right;
			align-items: center;
			justify-content: flex-end;

			span {
				cursor: pointer;
			}
		}
	}

	// .table {
	//   margin: 1.5625vw 0;
	//   width: 100%;
	:deep(.el-table) {
		margin-top: 1.5625vw;
		min-height: 80%;

		thead tr {
			background: linear-gradient(-90deg, #037bff 0%, #3996fc 100%) !important;
			box-shadow: 0px 4px 0px 0px rgba(77, 150, 236, 0.4);
			border-radius: 8px 0px 8px 0px;
		}

		.el-table__inner-wrapper::before {
			display: none;
		}

		.el-table__cell {
			padding: 15px 0;
		}

		.el-table__body tr.current-row {
			border: 1px solid #047cff !important;
			border-radius: 8px;
		}

		.el-table__body tr.current-row>td.el-table__cell {
			background: rgba(77, 150, 236, 0.4);
		}
	}

	:deep(.el-table__body) {
		.index-color {
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			border-radius: 50%;
		}

		.congestion-num {
			color: rgba(117, 197, 31, 1);
		}

		.congestion-num.orange {
			color: rgba(248, 162, 46, 1);
		}

		.congestion-num.red {
			color: rgba(244, 59, 29, 1);
		}

		& tr:nth-child(1) {
			& td:first-child {
				.index-color {
					background: #fb6036;
					color: white;
				}
			}
		}

		& tr:nth-child(2) {
			& td:first-child {
				.index-color {
					background: rgba(151, 203, 243, 1);
					color: white;
				}
			}
		}

		& tr:nth-child(3) {
			& td:first-child {
				.index-color {
					background: rgba(177, 102, 53, 1);
					color: white;
				}
			}
		}
	}

	// }
	.statistics-dio {
		position: absolute;
		left: calc(100% + 10px);
		height: 80vh;
		top: 0;
		width: 27.0833vw;
		background: rgba(0, 0, 0, 0.8);
		transform: translateX(-100vw);
		transition: all 0.5s;
		z-index: 9;
		display: flex;
		flex-direction: column;

		.head {
			text-align: center;
			color: white;
			font-size: 1.0416vw;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1.0416vw;

			.back {
				left: 0.5vw;
				position: absolute;
				cursor: pointer;
				display: flex;
				align-items: center;
				font-size: 14px;
			}
		}

		.tabs-group {
			//   margin: 1.5625vw 0;
			display: flex;
			align-items: center;

			.tabs-item {
				flex-grow: 1;
				text-align: center;
				position: relative;
				color: rgba(255, 255, 255, 0.3);
				padding: 1.125vw;
				cursor: pointer;
			}

			.tabs-item.active {
				color: white;
			}

			.tabs-item.active::after {
				position: absolute;
				content: '';
				width: 30px;
				height: 4px;
				background: #037bff;
				border-radius: 2px;
				bottom: 0.5vw;
				left: 50%;
				margin-left: -15px;
			}

			.tabs-line {
				width: 1px;
				height: 18px;
				background: #ffffff;
				opacity: 0.3;
			}
		}

		.mychart {
			width: 100%;
			height: 0;
			flex-grow: 1;
			margin-top: 6vh;
		}
	}

	.statistics-dio.show {
		transform: translateX(0);
	}

	.statistics-db {
		position: fixed;
		right: 10px;
		height: 90vh;
		top: 100px;
		width: 27.0833vw;
		background: rgba(0, 0, 0, 0.8);
		transform: translateX(-100vw);
		transition: all 0.5s;
		z-index: 9;
		display: flex;
		flex-direction: column;

		.child-box2 {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			padding-top: 40px;

			.cus-date {
				color: #fff;
			}

			.title {
				width: 100%;
				height: 42px;
				margin-left: 10px;
				display: flex;
				align-items: center;
				background: url(@/assets/images/report/leftTitle.png) no-repeat;

				p {
					font-size: 18px;
					color: white;
					margin-left: 10px;
					font-weight: 400;
				}
			}

			.sub-title {
				width: 100%;
				padding: 0 20px;

				span {
					color: #fff;
				}
			}

			.left-charts {
				height: 28%;
				width: 100%;
				margin: 10px 0;
			}
		}
	}

	.statistics-db.show {
		transform: translateX(0);
	}
</style>
<style lang="less" scoped>
	.el-popper.is-light {
		background-color: rgba(5, 12, 23) !important;
		border: 1px solid #3d618a54 !important;
	}

	.not-data {
		padding-top: 1vw;
		color: white;
	}
</style>